<h1 id="page_title">Quản lý ảnh</h1>
<div id="msg" align="center">
{$msg}
</div>
<table width="99%" bordercolor="#CCCCCC" border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse;margin: 20px auto">
    <thead>
        <tr>
            <td align="right">
                <span id="addimg">
                [ <a href="javascript:void(0);" onclick="insertImage(document.ManageImageListForm)">Thêm</a> ] ||
                </span>
                [ <a href="javascript:void(0);" onclick="selectAllCheckbox(document.ManageImageListForm,'ManageImageListForm',true,'#FFFFEC','white');">Tất cả</a> ]
                [ <a href="javascript:void(0);" onclick="selectAllCheckbox(document.ManageImageListForm,'ManageImageListForm',false,'#FFFFEC','white');">Bỏ chọn</a> ]
                [ <a href="javascript:void(0);" onclick="selectAllCheckbox(document.ManageImageListForm,'ManageImageListForm',-1,'#FFFFEC','white');">Ngược lại</a> ]
                ||
                <input type="checkbox" value="1" id="ManageImageListForm_all_checkbox" onclick="selectAllCheckbox(this.form, 'ManageImageListForm',this.checked,'#FFFFEC','white');">
                [ <a href="javascript:void(0);" onclick="if(confirm('Bạn sẽ xóa các ảnh đã chọn?')) document.ManageImageListForm.submit();" >Xóa</a> ]
                [ <a href="javascript:void(0);" id="upload_more_image" onclick="addNewImages();">Tải thêm ảnh mới</a> ]
            </td>
        </tr>
    </thead>
    <tbody>
        <tr><td id="image_list">
        {foreach from=$images item=image}
            <div id="image_item_{$image.id}" class="image_item">
                {$image.info}
                <div class="image_wrapper">
                    <img width="120" src="{show_image url=$image.img_url server=$image.img_server width=120}" align="{$image.img_name}" title="{$image.img_name}">
                </div>
                <div class="image_main">
                    Id: {$image.id}<br />
                    Tên: <span id="image_name_{$image.id}" class="image_name">{$image.img_name}</span>
                </div>
                <input type="checkbox" name="selected_ids[]" class="image_checkbox" value="{$image.id}" onclick="select_checkbox(this.form,'ManageImageListForm',this,'#FFFFEC','white');" data-url="{show_image url=$image.img_url server=$image.img_server width=120}" data-enable="{if $image.img_name}1{/if}">
                [ <a href="manage_image.html?cmd=delete&id={$image.id}">Xóa</a> ]
                [ <a href="javascript:void(0);" onclick="editImage({$image.id}, '{$image.img_name}')">Sửa</a> ]
                <br />&nbsp;
                [ <a href="{show_image url=$image.img_url server=$image.img_server width='max'}" target="_blank">Xem ảnh lớn</a> ]
            </div>
        {/foreach}
        </td></tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="">
                {$paging}
            </td>
        </tr>
    </tfoot>
</table>
<div id="popup_wrapper_save_name">
    <div id="overlay_save_name"></div>
    <div id="popup_save_name">
        <div class="title">Nhâp tên ảnh</div>
        <div class="form">
            <div>
                <input id="img_name" value="">
            </div>
        </div>
        <div class="button">
            <button id="button_save_name" type="button">Lưu</button>
            <button id="button_cancel_name" type="button">Hủy</button>
        </div>
    </div>
</div>
<script language="JavaScript" type="text/javascript">
    var WEB_DIR = "{$WEB_DIR}";
    var IMAGE_PATH = "{$IMAGE_PATH}";
    {literal}
    jQuery(function(){

        jQuery("#overlay_save_name, #button_cancel_name").click(function(){
            jQuery("#popup_wrapper_save_name").hide();
        });

        jQuery("#button_save_name").click(function(){
            var img_name = jQuery("#img_name");
            var img_id = img_name.attr("data-id");
            var img_name = img_name.val();
            jQuery.post(WEB_DIR+"ajax.php?act=image&code=save_image", {
                    img_id: img_id,
                    img_name: img_name
                },
                function(msg){
                    if(msg == "no_perm"){
                        log_faile ("Bạn không có quyền thực hiện chức năng này.", 5000);
                        return false;
                    }
                    else if(msg == "not_found"){
                        log_faile ("Không tìm thấy ảnh cần sửa.", 5000);
                        return false;
                    }
                    else{
                        if(msg=="unsuccess"){
                            log_faile ("Không sửa được.", 5000);
                            return false;
                        }
                        else{
                            var image_item = jQuery("#image_item_"+img_id);
                            image_item.find("img").first().attr({"align":img_name, "title":img_name});
                            jQuery("#image_name_"+img_id).html(img_name);
                            image_item.find("a").last().attr("onclick", "editImage("+img_id+", '"+img_name+"')");
                            var responseJSON = jQuery.parseJSON(msg);
                            if(responseJSON.img_server==1) {
                                var img_url = IMAGE_PATH+"/thumb_w/120/"+responseJSON.img_url;
                            } else {
                                var img_url = WEB_DIR+responseJSON.img_url;
                            }
                            image_item.find("input").first().attr({"data-enable": 1,"data-url": img_url}).show();
                            log_success("Sửa thành công.", 5000);
                        }
                    }
                });
            jQuery("#popup_wrapper_save_name").hide('slow');
        });
    });
    function addNewImages(){
        var str = '<button id="button_add_upload_image" type="button">Lưu upload</button><button id="button_cancel_upload_image" type="button">Hủy upload</button>';
        window.top.jQuery('#button_add_image').after(str);
        window.top.jQuery('#button_add_image').hide();
        window.top.jQuery('#button_cancel_add_image').hide();
        window.location.href = "manage_image.html?cmd=upload";
    }
    function insertImage() {
        var imgs = [];
        var form = document.ManageImageListForm;
        for (var i = 0; i < form.elements.length; i++) {
            if (form.elements[i].name == 'selected_ids[]' && form.elements[i].checked) {
                var ip = jQuery(form.elements[i]);
                if(ip.attr("data-enable"))
                    imgs[imgs.length] = {'id':ip.attr("value"), 'url':ip.attr("data-url")};
                form.elements[i].checked = false;
            }
        }
        if(imgs.length>0) window.top.insertImage(imgs);
        else alert("Bạn chưa chọn ảnh.");
    }

    function editImage(id, name) {
        jQuery("#popup_wrapper_save_name").show();
        jQuery("#img_name").attr("data-id", id);
        jQuery("#img_name").val(name?name:"");
    }

    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load
    {/literal}
</script>